
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
<!-- 导航栏开始 -->
<div class="nav">
    <ul>
        <li>
            <a href="#">导航菜单制作 </a>
            <ul class="a1">
            <li><a href="./键盘焦点.html">键盘焦点</a>
            <li><a href="./billbill效果.html">billbill效果</a>
        </li>
        </ul>
        <li>
            <a href="#">浮动定位</a>
            <ul class="b">
                <li><a href="./浮动.html">浮动</a></li>
                    <li><a href="./浮动1.html">浮动1</a></li>
                        <li><a href="./浮动2.html">浮动2</a></li>
                        <li><a href="./浮动3.html">浮动3</a></li>
        </li>
        </ul>
        <li>
            <a href="#">购物车图标</a>
            <ul class="c">
            <li><a href="./购物车.html">购物车</a>
        </li>
        </ul>
        <li>
            <a href="#">CSS动画</a>
            <ul class="d">
            <li><a href="./2D效果.html">2D效果</a>
            <li><a href="./3D效果.html">3D效果</a>
            <li><a href="./动画.html">动画</a>
            <li><a href="./立方体.html">立方体</a>
        </li>
    </ul>
    <li>
        <a href="../主页.html">首页</a>
    </li>
    </ul>
</ul>
</div>
<!-- 导航css开始 -->
<style>
    .nav{
      width: 625px;
      height: 50px;
      margin-top: 1%;
      margin-left: 33%;
      background-color:rgba(0, 0, 0, 0.507);
  }
  ul{
      margin-top: 0px;
      padding-inline-start: 0%;
  }
  .nav>ul>li{
      float: left;
      list-style: none;
      text-align: center;
      height: 50px;
      line-height: 50px;
      width: 125px;
      font-size: 15px;
      font-family: 微软雅黑;
  }
  a{
      color: rgb(255, 255, 255);
      text-decoration: none;
  }
  ul>li:hover{
      background-color:rgb(0, 0, 0);
  }
  .a1{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.a1{
      display: block;
  }
  .b{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.b{
      display: block;
  }
  .c{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.c{
      display: block;
  }
  .d{
      list-style: none;
      background-color:rgb(125, 125, 125);
      display: none;
  }
  li:hover>.d{
      display: block;
  }
  </style>
</head>

  <!-- 导航结束 -->
<body>
    <h3 align="center">上一章下一章被我室友吃了（只是被隐藏了）
        先点购物车再点浮动3
    </h3>
    <div class="contanier">
        <div class="navbox">
            <a href="#" class="left">上一章</a>
            <a href="#" class="right">下一章</a>
            <h1 class="title">西游记</h1>
        </div>
        <div class="content">
            <img src="../img/西游记.webp" alt="">
        </div>
    </div>
    
    <style>
        h3{
            margin: 5% 0%;
        }
        .navbox{
            width: 600px;
            height: 100px;
            border: 10px red solid;
            text-align: center;
            margin: auto;
           
        }
        .right{
            float: right;
            
        }
        .left{
            float: left;
        }
        .navbox a{ 
            height: 100%;
            line-height: 100px;
            font-size: 30px;
            
        }
        .navbox a:hover{
            color: rgb(0, 255, 255);
        }
        .content{
           text-align: center;
            margin: auto;
        }
        .content img{
            border: 10px blue solid;
            max-width: 600px;
        }
    </style>
</body>
</html>